//初始化数据
let hashA = init();
let backs = hashA['backs']
let hash = hashA['hash']


//工具函数
function init() {
    let backs = {
        0: ['q'],
        1: ['w', 'e'],
        2: ['r', 't', 'y'],
        3: ['u', 'i', 'o', 'p'],
        4: ['a', 's', 'd', 'f', 'g'],
        length: 5
    }
    let hash = {
        q: 'juejin.im', //掘金
        w: 'wangdoc.com', //网道
        e: 'gitee.com', //码云
        r: 'csdn.net', //csdn
        t: 'oschina.net', //开源中国
        y: 'yuque.com', //语雀
        u: 'segmentfault.com/', //思否
        i: 'xiaopiu.com', //xiaopiu移动
        o: 'scriptoj.mangojuice.top', //前端测试
        p: 'i18next.com', //多语言
        a: 'cssgrid-generator.netlify.com', //grid布局
        s: 'www.bilibili.com/read/cv3560839', //哔哩哔哩前端教程
        d: 'zhihu.com', //知乎    
        f: 'xiedaimala.com', //写代码啦
        g: 'html5.cn' //html中文    
    }
    let hasInLocalStorage = getFormLocalStorage('data');
    if (hasInLocalStorage) {
        hash = hasInLocalStorage;
    }
    return { 'backs': backs, 'hash': hash }
}

function getFormLocalStorage(name) {
    return JSON.parse(localStorage.getItem(name) || 'null')
}

//2.生成键盘
generateKeyBoard(backs, hash);

function generateKeyBoard(backs, hash) {
    for (let index = 0; index < backs['length']; index = index + 1) { //0 1 2
        let div = tag('div');
        main.appendChild(div);

        let row = backs[index];
        for (let index2 = 0; index2 < row['length']; index2 = index2 + 1) { //将固定的10换成可控制的
            let kbd_wrapper = tag('div');
            kbd_wrapper.className = 'kbd_wrapper';
            let kbd = tag('kbd');
            kbd.className = 'key';
            let span = createSpan(row[index2]);
            let img = createImage(hash[row[index2]]);
            let button = createButton(row[index2]);

            // 判断按键是否已经有对应的网址
            if (hash[row[index2]] === undefined) {
                kbd.setAttribute('title', '未设置网站导航');
            } else {
                kbd.setAttribute('title', hash[row[index2]]);
            }

            kbd.onclick = function(e) {
                let website = e.currentTarget.getAttribute('title');
                if (website === '未设置网站导航') {
                    alert('请编辑此按键的网站再跳转');
                } else {
                    window.open('http://' + website, "_blank");
                }
            }

            kbd.appendChild(span);
            kbd.appendChild(img);
            kbd.appendChild(button);
            kbd_wrapper.appendChild(kbd);
            div.appendChild(kbd_wrapper);
        }
    }
}

function tag(tagName) {
    let element = document.createElement(tagName);
    return element;
}

function createSpan(textContent) {
    let span = tag('span');
    span.textContent = textContent; //第一个数组 第二个数组 第三个数组
    span.className = 'text';
    return span;
}

function createButton(id) {
    let button = tag('button');
    button.textContent = 'e';
    button.id = id;
    button.onclick = function(e) {
        //阻止事件冒泡
        e.stopPropagation();
        let button2 = e['target'];
        let img2 = button2.previousSibling;
        //获取当前的id
        let key = button2['id'];
        //用户输入一个网址
        let web = prompt('请输入一个网址：');
        //将原来的hash给替换掉
        hash[key] = web;
        img2.src = 'http://' + web + '/favicon.ico';
        console.log(e.target)
        img2.onerror = function(e) {
            e.target.src = '../img/dot.png';
        }
        localStorage.setItem('data', JSON.stringify(hash));
    }
    return button;
}

function createImage(domain) { //hash[row[index2]]
    let img = tag('img');
    if (domain) {
        img.src = 'http://' + domain + '/favicon.ico';
    } else {
        img.src = './image/dot.png';
    }
    img.onerror = function(e) {
        e.target.src = './img/dot.png';
    }
    return img;
}